<script setup>
import { reactive, ref, watch } from 'vue'
const count = ref(0)
const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})
const intro = ref('我是MT')

const change = () => {
  count.value++
  intro.value = '' + Math.random()
}

// 1，监听复杂数据 需要箭头函数,监听对象中属性的变化
// watch(
//   () => user.info.age,
//   (newValue) => {
//     console.log(newValue)
//   }
// )
// 3. 监听对象中多个属性变化
// -----------------对整个对象进行侦听
watch(
  () => user.info,
  (newValue) => {
    console.log(newValue)
  },
  {
    // 必须开启深度侦听
    deep: true,
    // 一进入就执行一次回调函数
    immediate: true
  }
)
</script>

<template>
  <div class="app-page">
    <div>{{ count }}</div>
    <div>{{ intro }}</div>
    <button @click="change">变</button>
  </div>
</template>